<template>
  <view class="">
    <up-tabs :list="list1" @click="click" lineColor="#B98A73" :current="model.currentIndex"
      :activeStyle="{ color: '#B98A73' }" :scrollable="false"></up-tabs>
    <view class="content-wrap">
      <!-- 基础信息 -->
      <view v-if="model.currentIndex === 0">
        <view class="flex-ac mt20 form-item">
          <view class="left-label">名称</view>
          <up-input placeholder="请输入" :disabled="!model.edit" v-model="model.currentData.name" border="none"
            color="#999" type="number"></up-input>
        </view>
        <view class="flex-ac mt20 form-item">
          <view class="left-label">日期</view>
          <view @click="handleClick" v-if="model.currentData.periodType">
            {{ model.currentData.startDate }} ~ {{ model.currentData.endDate }}
          </view>
          <view v-else>
            <view>平日：{{ common.formatStr(model.currentData.period, '0') }}</view>
            <view>周末：{{ common.formatStr(model.currentData.period, '1') }}</view>
          </view>
        </view>
      </view>
      <!-- 车型价格 -->
      <view v-else class="vehicle-list">
        <view v-for="(item, index) in model.currentData.vehicleModelConfigList" :key="index"
          @click="selectModel(item.vehicleModel)" class="vehicle-item mt20"
          :class="{ active: model.modelUuid.includes(item.vehicleModel?.modelUuid) }">
          <view class="title">{{ item.vehicleModel.seriesName }} {{ item.vehicleModel.modelName }}</view>
          <view class="desc">每日价格:
            <text v-for="item in item.channelPriceList">{{ " " + item.channelName }} {{ item.price || "-" }} </text>
          </view>
        </view>
      </view>

    </view>
    <!-- 按钮组  -->
    <view class="btn-wrap">
      <view v-if="model.currentIndex === 0 && model.currentData.periodType">
        <up-button type="primary" :hairline="false" color="#B98A73" style="width: 95%;" shape="circle" text="编辑"
          @click="edit" v-if="!model.edit"></up-button>
        <view v-else class="flex-ac btn-group">
          <up-button type="primary" :hairline="false" color="#B98A73" plain style="width: 95%;" shape="circle" text="取消"
            @click="model.edit = false"></up-button>
          <up-button type="primary" :hairline="false" color="#B98A73" style="width: 95%;" shape="circle" text="提交"
            @click="editSubmit"></up-button>
        </view>
      </view>
      <view v-if="model.currentIndex === 1">
        <up-button type="primary" :hairline="false" color="#B98A73" style="width: 95%;" shape="circle" text="批量修改"
          @click="change" v-if="!model.selectClick"></up-button>
        <up-button type="primary" :hairline="false" color="#B98A73" style="width: 95%;" shape="circle" text="确认选择"
          @click="confirmSelect" v-else></up-button>
      </view>
    </view>
    <up-calendar title="选择日期区间" color="#B98A73" @close="model.showCalendar = false" :show="model.showCalendar"
      mode="range" @confirm="confirm"></up-calendar>

    <ClosePopup title="价格修改" ref="changePriceClosePopupRef" height="40vh">
      <view class="close-popup-content">
        <view>
          <view v-if="model.currentData.periodType">
            <view class="flex-ac mt20 form-item">
              <view class="left-label">每日价格</view>
              <up-input placeholder="请输入" border="none" color="#999" type="number"></up-input>
              <view class="unit">元/天</view>
            </view>
          </view>
          <view v-else>
            <view class="flex-ac mt20 form-item">
              <view class="left-label">周中</view>
              <up-input placeholder="请输入" border="none" color="#999" type="number"></up-input>
              <view class="unit">元/天</view>
            </view>
            <view class="flex-ac mt20 form-item">
              <view class="left-label">周末</view>
              <up-input placeholder="请输入" border="none" color="#999" type="number"></up-input>
              <view class="unit">元/天</view>
            </view>
          </view>
        </view>
        <view class="flex-jc popup-btn-group">
          <up-button type="primary" color="#B98A73" plain shape="circle" text="取消" @click="cancel"></up-button>
          <up-button type="primary" color="#B98A73" shape="circle" text="确认改价" @click="confirmChangePrice"></up-button>
        </view>
      </view>
    </ClosePopup>
  </view>
</template>
<script setup>
import { ref, reactive } from "vue"
import { onLoad } from "@dcloudio/uni-app";
import { postRequest } from "@/reuqest/request.js";
import common from "@/utils/common.js";
import ClosePopup from "@/components/close-popup/index.vue";


// 创建响应式数据  
const list1 = reactive([
  { name: '基础信息' },
  { name: '车型价格' },
]);

const changePriceClosePopupRef = ref(null);

const model = reactive({
  showCalendar: false,
  edit: false,
  selectClick: false,
  uuid: "",
  currentData: {},
  currentIndex: 0,
  modelUuid: [],
})
const list = ref([])

// 定义方法  
function click(item) {
  console.log('item', item);
  model.currentIndex = item.index;
}

const handleClick = () => {
  if (!model.edit) {
    return;
  }
  model.showCalendar = true;
}

const confirmChangePrice = () => {

  // changePriceClosePopupRef.value.close();
  // model.selectClick = false;
}

const confirmSelect = () => {
  if (model.modelUuid.length == 0) {
    uni.$u.toast("请选择车型");
    return;
  }
  changePriceClosePopupRef.value.open();
}

const cancel = () => {
  changePriceClosePopupRef.value.close();
}

const selectModel = (item) => {
  if (!model.selectClick) return;
  let index = model.modelUuid.findIndex(uuid => uuid == item.modelUuid)
  if (index > -1) {
    model.modelUuid.splice(index, 1)
  } else {
    model.modelUuid.push(item.modelUuid)
  }
}

const editSubmit = () => {
  console.log('editSubmit');
}

const edit = (item) => {
  console.log('edit', item);
  model.edit = true;
}

const confirm = (e) => {
  console.log(e);
};

const change = () => {
  model.selectClick = true;
  console.log('changePrice');
}

const getData = (storeUuid) => {
  postRequest("/wx-operation/api/v1/bm/rental/price/config/getPriceConfig", {
    storeUuid,
  }).then(res => {
    if (res.bizCode === "00000") {
      list.value = [res.data.commonPeriodConfig, ...res.data.assignPeriodConfigList];
      model.currentData = list.value.find(item => item.uuid == model.uuid)
      model.currentData.name = model.currentData.periodType ? model.currentData.periodName : "基础价格"
    }
  })
}

onLoad((options) => {
  if (options) {
    console.log(options)
    model.uuid = options.uuid;
    getData(options.storeUuid)
  }
})
</script>
<style lang="scss" scoped>
.content-wrap {
  padding: 30rpx;
  background-color: #fff;
  height: 80vh;

  .form-item {
    border-bottom: 1px solid #D9D9D9;
    padding: 30rpx 0;

    .left-label {
      width: 80rpx;
      margin-right: 30rpx;
    }
  }

  .vehicle-list {
    height: 100%;
    overflow: auto;

    .vehicle-item {
      border-radius: 20rpx;
      background-color: #fff;
      padding: 32rpx;
      margin-bottom: 30rpx;
      box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.06);
      box-sizing: border-box;

      &.active {
        border: 1px solid #B98A73;
      }

      .title {
        font-size: 24rpx;
        color: #000;
        font-weight: 600;
      }

      .desc {
        color: #999;
        font-size: 20rpx;
        margin-top: 20rpx;
      }
    }
  }
}

.btn-wrap {
  width: 100%;
  position: fixed !important;
  left: 0rpx;
  bottom: 40rpx;

  .btn-group {
    padding: 0 30rpx;
    gap: 30rpx;
  }
}

.close-popup-content {
  .form-item {
    padding: 30rpx 0;
    border-bottom: 1px solid #D9D9D9;

    .left-label {
      width: 120rpx;
      margin-right: 30rpx;
    }

  }

  .popup-btn-group {
    margin-top: 60rpx;
    gap: 30rpx;
  }
}
</style>
